<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="images/common.css">
    <link rel="stylesheet" href="images/index.css">
    <script src="images/jquery.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="banner_bg">这里放banner</div>

<div class="container w">
    <!-- banner -->
    <div class="container_left">
        <div class="container_left_title">我是左侧标题</div>
    <!-- nav -->
    <div class="nav_container">
        <ul>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">
                        首页
                    </span>
                    <span class="trl"></span>
                </div>

                <ul class="second_menu nav1">
                    <li class="li_item li_active">javascript</li>
                    <li class="li_item">jquery</li>
                </ul>
            </li>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">
                        课程中心
                    </span>
                    <span class="trl"></span>
                </div>
                <ul class="second_menu nav2">
                    <li class="li_item">html</li>
                    <li class="li_item">css</li>
                </ul>
            </li>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">
                        学习中心
                    </span>
                    <span class="trl"></span>
                </div>
                <ul class="second_menu nav3">
                    <li class="li_item">vue</li>
                    <li class="li_item">react</li>
                </ul>
            </li>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">经典案例</span>
                    <span class="trl"></span>
                </div>
                <ul class="second_menu nav4">
                    <li class="li_item">品有够</li>
                    <li class="li_item">念起琴心</li>
                </ul>
            </li>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">关于我们</span>
                    <span class="trl"></span>
                </div>
                <ul class="second_menu nav5">
                    <li class="li_item">联系客服</li>
                    <li class="li_item">反馈</li>
                    <li class="li_item">反馈1</li>
                    <li class="li_item">反馈2</li>
                    <li class="li_item">反馈3</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

    <div class="container_right">
        <!-- content -->
       
        <div class="tabbar_list item1 showContent">
            <div class="content_title">学校管理--教育事业发展主要情况（15）</div>
            <div class="list_content">
                <ul>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="list_page">分页</div>
        </div>

        </div>
    </div>
</div>
    <script>
        $(function() {
            var isTrl = true
            
            $(".nav_container ul li div").click(function () {
                $(this).parent().children(".second_menu").slideToggle();
                if (isTrl) {
                    $(this).parent().children(".nav_name_container").children(".trl").addClass("trl_rotate")
                    isTrl = false
                } else {
                    $(this).parent().children(".nav_name_container").children(".trl").removeClass("trl_rotate")
                    isTrl = true
                }
            })
            $(".nav1 li").click(function() {

                var nav1 = $(this).index()
                $(".item1").eq(nav1).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".nav2 li").click(function() {
                var nav2 = $(this).index()
                $(".item2").eq(nav2).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".nav3 li").click(function() {
                var nav3 = $(this).index()
                $(".item3").eq(nav3).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".nav4 li").click(function() {
                var nav4 = $(this).index()
                $(".item4").eq(nav4).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".nav5 li").click(function() {
                var nav5 = $(this).index()
                $(".item5").eq(nav5).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".li_item").click(function () {
                
                $(this).addClass("li_active").siblings().removeClass("li_active")
                $(this).parent().parent().siblings().children(".second_menu").children(".li_item").removeClass("li_active")
            })
        })
    </script>
</body>

</html>